<template>
    <div id="Servicelist">
      <scroller lock-x height="-65" @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="50">
        <div class="box2">
          <group v-for="(item,index) in allList" :key="index">
            <cell is-link :title="'售后单号 '+item.customer_ordernum" @click.native="nextFun(item.id)" :inline-desc="'状态: '+item.status+item.different_status+item.handle_type">
                <span class="slo">{{item.btn_status}}</span>
            </cell>
          </group>
          <load-more tip="正在加载" v-show="onFetching"></load-more>
          <load-more :show-loading="false" :tip="text" v-show="onAll" background-color="#fbf9fe"></load-more>
        </div>
      </scroller>
    </div>
</template>

<script>
    import {  Cell , Group , Scroller, LoadMore ,cookie} from 'vux'
    import { sorts,sign } from '../../aes/make';
    import { Decrypt} from '../../aes/aes';
    import { getCustomerOrders } from '../../mock/api';
    export default {
        name: "service-list",
        components: {
          Group,
          Cell,
          Scroller,
          LoadMore,
        },
        data(){
            return{
              id:0,
              allList:[],
              onFetching:true,
              page:1,
              pagesize:10,
              maxPage:0,
              onAll:false,
              text:'已加载全部数据'
            }
        },
        computed:{

        },
      created () {
        let vue = this
        vue.updateTitle('电池售后');
        vue.updateGreenRightNum(1);
        vue.updateUrlBack('/index.php?s=/shop/user/personal_center');
        vue.updatePreventGoBack(true);
      },
        mounted(){
          this.$nextTick(() => {
            this.$refs.scrollerBottom.reset({top: 0})
          });
          this.serviceList();
        },
        methods: {
          onScrollBottom() {
            if (this.onFetching) {
              // do nothing
            } else {
              this.page+=1;
              if(this.maxPage<this.page && this.maxPage>=1){
                this.onFetching = false;
                this.onAll=true;
                this.text='已加载全部数据'
              }else if(this.maxPage<1){
                this.onFetching = false;
                this.onAll=true;
                this.text='暂无数据'
              }else{
                this.onFetching = true;
                this.onAll=false;
                this.serviceList();
                this.$nextTick(() => {
                  this.$refs.scrollerBottom.reset()
                })
              }
            }
          },
          serviceList(){
            var so=sorts();
            var uid=cookie.get('uid');
            var access_token=cookie.get('access_token');
            var json={
              page:this.page,
              pagesize:this.pagesize,
              requestType:0,
              sorts:so,
              uid:uid,
              access_token:access_token
            }
            var si=sign(json);
            json['sign']=si;
            if(this.page==1){
              this.allList=[];
            }
            getCustomerOrders(json).then((res)=>{
              let vue=this;
              if(res.code==40013){
                vue.$router.push({name: 'login', params: {}});
                return false;
              }
              if(res.code==2003){
                this.onFetching = false;
                this.onAll=true;
                this.text='暂无数据'
                return false;
              }
              if(res.code==2000){
                var jm=Decrypt(res.data);
                jm=JSON.parse(jm);
                // var jm=res.data
                this.maxPage=Math.ceil(jm.total/this.pagesize);
                for(var j in jm){
                  if(jm[j]!='' && jm[j] instanceof Object){
                    //显示状态
                    if(jm[j].status=='检测完成'){
                      if(jm[j].different_status==1){
                        jm[j]['btn_status']='需补差价';
                      }else{
                        jm[j]['btn_status']='待确认';
                      }
                    }else if(jm[j].status=='确认未付款'){
                      jm[j]['btn_status']='去支付';
                    }else if(jm[j].status=='已发货'){
                      jm[j]['btn_status']='确认收货';
                    }else if(jm[j].status=='确认收货'){
                      jm[j]['btn_status']='已完结';
                      jm[j]['status']='已完结';
                      jm[j]['handle_type']='';
                      jm[j]['different_status']='';
                    }else if(jm[j].status=='待处理'){
                      jm[j]['btn_status']='待处理';
                      jm[j]['handle_type']='';
                      jm[j]['different_status']='';
                    }else{
                      jm[j]['btn_status']='';
                    }
                    if(jm[j]['handle_type']==undefined){
                      jm[j]['handle_type']='';
                    }
                    if(jm[j]['different_status']==1){
                      jm[j]['different_status']='加价';
                    }else if(jm[j]['different_status']==2){
                      jm[j]['different_status']='退款';
                    }else{
                      jm[j]['different_status']='';
                    }
                    vue.allList.push(jm[j]);
                  }
                }
                this.onFetching=false;
              }
            })
          },
          nextFun(id){
            this.$router.push({path: 'details/'+id+''});
          }
        }
    }
</script>

<style lang="less" scoped>
  @hong:#cf0808;
  @blue:#1babe3;
  @green:#51ac33;
  .slo{
    color: @green;
    margin-right: 5px;
    font-size: 12px;
  }
  .bottomSC{
    width: 100%;
    height:1em ;
    background-color:#F5F5F5 ;
  }
  .box2{
    overflow: hidden;
    margin-top: -0.6em;
  }
</style>
